<template>
  <el-tag 
    :type="tagType" 
    :size="size"
    :effect="effect"
    class="environment-tag"
  >
    <el-icon class="env-icon" v-if="showIcon">
      <component :is="envIcon" />
    </el-icon>
    {{ envText }}
  </el-tag>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import {
  Monitor,
  Tools,
  Warning,
  CircleCheck
} from '@element-plus/icons-vue'

interface Props {
  environment: string
  size?: 'large' | 'default' | 'small'
  effect?: 'dark' | 'light' | 'plain'
  showIcon?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'default',
  effect: 'light',
  showIcon: true
})

// 环境配置映射
const envConfig = {
  development: {
    type: 'info',
    text: '开发环境',
    icon: Tools
  },
  testing: {
    type: 'warning',
    text: '测试环境',
    icon: Monitor
  },
  staging: {
    type: 'primary',
    text: '预发布环境',
    icon: Warning
  },
  production: {
    type: 'success',
    text: '生产环境',
    icon: CircleCheck
  }
} as const

// 计算属性
const tagType = computed(() => {
  return envConfig[props.environment as keyof typeof envConfig]?.type || 'info'
})

const envText = computed(() => {
  return envConfig[props.environment as keyof typeof envConfig]?.text || props.environment
})

const envIcon = computed(() => {
  return envConfig[props.environment as keyof typeof envConfig]?.icon || Tools
})
</script>

<style scoped>
.environment-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.env-icon {
  font-size: 12px;
}
</style>